<template>
  <div class="mystock-con">
    <h2 class="tile">我的关注股</h2>
    <el-table :data="followStockList" highlight-current-row @selection-change="selsChange" style="width: 100%;" id="users">
			<el-table-column type="selection" width="60">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
      <el-table-column label="名称" prop="name" sortable width="120">
          <template slot-scope="scope">
            <!-- "https://money.163.com/+'{{code}}'+.html" -->
            <a href="#" target="__blank" class="hstock h_hstockName">
            {{scope.row.name}}
            </a>
          </template>
        </el-table-column>
      <el-table-column prop="lastestPrice" label="最新价" width="120">
			</el-table-column>
      <el-table-column prop="percent" label="涨跌幅" width="120">
			</el-table-column>
			<el-table-column label="取关" width="150">
				<template slot-scope="scope">
					<el-button type="danger" size="small" icon="el-icon-delete"  @click="addFollowStock(scope.row)">取关</el-button>
				</template>
			</el-table-column>
      <el-table-column label="买入" width="150">
				<template slot-scope="scope">
					<el-button type="primary" size="small" icon="el-icon-wallet"  @click="addFollowStock(scope.row)">买入</el-button>
				</template>
			</el-table-column>
		</el-table>
    <el-button type="danger" :disabled="this.sels.length===0" class="plBtn">批量取关</el-button>

  </div>
  
</template>

<script>

import {
  getFollowStock,
  updateFollowStock,
  getHotStock
} from '../../../api/followStock.js'
export default {
  data() {
    return {
      sels: [], // 列表选中列
      followStockList:[],
      hotStocksList:[]
    }
  },
  methods:{
    // 全选单选多选
    selsChange(sels) {
      this.sels = sels
    },
    getFollowedStock(){
      getFollowStock().then(res => {
      console.log(res);
      this.followStockList=res.data;
      })
    },
    addFollowStock(param){
      console.log(param);
      updateFollowStock(param).then(res => {
        console.log(res);
        this.$message({
          message: res.data.data.message,
          type: 'success'
        })
        this.getHotStockRes()
        this.getFollowedStock()
      })
    }
  },
  created() {
    this.getFollowedStock()
  }
}
</script>

<style>
  .mystock-con {
    margin-top:50px;
    margin-left:70px;
  }
  .mystock-con .title {
    margin-left:20px;
    margin-bottom:20px;
    color:#409EFF;
  }
  .plBtn {
    margin-top:10px !important;
  }
</style>